<template>
	<view class="demo-wrapper">
		<view class="demo-item">
			<view class="demo-item-title">基本使用</view>
			<view class="demo-item-content"><evan-upload :options="options" @on-upload="fnOnUpload"></evan-upload></view>
		</view>
		<view class="demo-item">
			<view class="demo-item-title">样式设置</view>
			<view class="demo-item-content">
				<evan-upload :radius="100" :useVideo="false" :defaultImageList="imageList" :options="options" @on-upload="fnOnUpload"></evan-upload>
			</view>
			<view class="tips">
				使用说明：
				<view class="tips-content no-indent">
					增加圆角值设置参数
					<text class="code-tip">radius</text>
					，Number类型。
				</view>
			</view>
		</view>
		<view class="demo-item">
			<view class="demo-item-title">图片上传</view>
			<view class="demo-item-content"><evan-upload :options="options" :useVideo="false" :imgCoverKey="imgCoverKey" @on-upload="fnOnUpload"></evan-upload></view>
			<view class="tips">
				使用说明：
				<view class="tips-content no-indent">禁用视频上传</view>
			</view>
		</view>

		<view class="demo-item">
			<view class="demo-item-title">视频上传</view>
			<view class="demo-item-content"><evan-upload :options="options" :useImage="false" @on-upload="fnOnUpload"></evan-upload></view>
			<view class="tips">
				使用说明：
				<view class="tips-content no-indent">禁用图片上传</view>
			</view>
		</view>

		<!-- 示例：初始化数据（参数初始化） -->
		<view class="demo-item">
			<view class="demo-item-title">初始化数据（参数初始化）</view>
			<view class="demo-item-content">
				<evan-upload
					ref="allUpload"
					:fileSuffix="fileSuffix"
					videoCoverKey="cover"
					:videoLimit="3"
					:defaultImageOrVideoList="defaultImageOrVideoList"
					:options="options"
					@on-pre-video="fnOnPreVideo"
				></evan-upload>
			</view>
			<view class="demo-item-content"><evan-upload ref="imageUpload" :useVideo="false" :defaultImageList="defaultImageList" :options="options"></evan-upload></view>
			<view class="demo-item-content">
				<evan-upload
					ref="videoUpload"
					:useImage="false"
					videoCoverKey="cover"
					:videoLimit="3"
					:defaultVideoList="defaultVideoList"
					:options="options"
					@on-pre-video="fnOnPreVideo"
				></evan-upload>
			</view>
			<view class="tips">
				使用说明：
				<view class="tips-content">
					除了可以通过参数
					<text class="code-tip">defaultImageOrVideoList、defaultImageList、defaultVideoList</text>
					加载默认的数据之外，您还可以使用以下函数
					<text class="code-tip">loadAllPreview、loadImagePreview、loadVideoPreview</text>
					进行数据的加载，以上方法均可通过ref调用，数据格式相同。
					<view class="">
						注意：传入的数据项中必须要有对应的文件扩展名类型字段，与 通过参数
						<text class="code-tip">fileSuffix</text>
						设置的一致。
					</view>
				</view>
			</view>
		</view>

		<!-- 示例：格式化数据 -->
		<view class="demo-item">
			<view class="demo-item-title">数据格式化</view>
			<view class="demo-item-content"><evan-upload :options="options" :format="fnUploadFormat" @on-upload="fnOnUpload"></evan-upload></view>
			<view class="tips">
				使用场景：
				<view class="tips-content">
					当后台返回的数据非以下数据格式，如
					<text class="code-tip">{code:200,data:[ { thumbnail:'缩略图/视频封面地址',url:'原图/视频地址'}]}</text>
					此时需要使用
					<text class="code-tip">:format="fn"、:imgFormat="fn" 和 :videoFormat="fn"</text>
					任选其一传入一个函数进行格式化，该格式化对 初始化传值和响应的数据生效，后两个针对具体数据类型进行格式化，具体使用方法参考示例。
				</view>
			</view>
		</view>

		<!-- 示例：初始化完成后切换组件 -->
		<view class="demo-item">
			<view class="demo-item-title">初始化完成后切换组件</view>
			<view class="demo-item-content">
				<evan-upload
					v-if="isUseUploadImage == '上传图片'"
					ref="uploadRef"
					:imageOptions="{ url: 'http://xx.xx.com/i-upload' }"
					:useVideo="false"
					@on-upload="fnOnUpload"
				></evan-upload>
				<evan-upload v-else ref="uploadRef" :videoOptions="{ url: 'http://xx.xx.com/v-upload' }" :useImage="false" @on-upload="fnOnUpload"></evan-upload>
			</view>
			<view class="">
				<u-radio-group v-model="isUseUploadImage" @change="fnOnSwitchUploadType">
					<u-radio v-for="(item, index) in [{ name: '上传图片' }, { name: '上传视频' }]" :key="index" :name="item.name" :disabled="false">{{ item.name }}</u-radio>
				</u-radio-group>
			</view>
			<view class="tips">
				使用场景：
				<view class="tips-content">
					此时，如果组件初始化的时候使用的是独立的配置 imageOptions 和 videoOptions，并且需要手动切换组件的时候必须调用内部函数 fnChangeOptions() 切换配置，或者配置参数
					autoChangeOptions=true 也可以达到效果。
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '上传示例',
			imgCoverKey: 'url', // 图片封面的key，默认是thumbnail
			fileSuffix: 'fileType', // 响应的数据中文件的扩展名字段
			options: {
				url: 'http://xx.xx.com/upload',
				name: 'file', // 后台接收文件名称
				headers: {},
				formData: {}
			},
			imageList: [
				{
					id: 2,
					name: '图片1',
					thumbnail: 'http://mitu-school-api.kuaiyunds.com/mitu-school-api/useravatar/useravatar_15.jpeg',
					url: 'http://mitu-school-api.kuaiyunds.com/mitu-school-api/useravatar/useravatar_15.jpeg',
					fileType: 'jpeg'
				}
			],
			// 示例：初始化数据
			defaultImageOrVideoList: [
				{
					id: 0,
					name: '示例视频111111',
					cover: 'http://mitu-school-api.kuaiyunds.com/mitu-school-api/useravatar/useravatar_01.jpeg',
					url: 'http://videos.kuaiyunds.com/videos/v_001.mp4',
					fileType: 'mp4' // 必须增加设置 fileType 该字段，且与参数 fileSuffix 的值同名
				},
				{
					id: 2,
					name: '图片1',
					thumbnail: 'http://mitu-school-api.kuaiyunds.com/mitu-school-api/useravatar/useravatar_03.jpeg',
					url: 'http://mitu-school-api.kuaiyunds.com/mitu-school-api/useravatar/useravatar_03.jpeg',
					fileType: 'jpeg'
				}
			],
			defaultImageList: [
				{
					id: 2,
					name: '图片1',
					thumbnail: 'http://mitu-school-api.kuaiyunds.com/mitu-school-api/useravatar/useravatar_05.jpeg',
					url: 'http://mitu-school-api.kuaiyunds.com/mitu-school-api/useravatar/useravatar_05.jpeg',
					fileType: 'jpeg'
				},
				{
					id: 3,
					name: '图片2',
					thumbnail: 'http://mitu-school-api.kuaiyunds.com/mitu-school-api/useravatar/useravatar_06.jpeg',
					url: 'http://mitu-school-api.kuaiyunds.com/mitu-school-api/useravatar/useravatar_06.jpeg',
					fileType: 'jpeg'
				}
			],
			defaultVideoList: [
				{
					id: 0,
					name: '示例视频233',
					url: 'http://videos.kuaiyunds.com/videos/v_001.mp4',
					fileType: 'mp4'
				},
				{
					id: 1,
					name: '示例视频2',
					cover: 'http://mitu-school-api.kuaiyunds.com/mitu-school-api/useravatar/useravatar_10.jpeg',
					url: 'http://videos.kuaiyunds.com/videos/v_002.mp4',
					fileType: 'mp4'
				}
			],

			// ========= 切换组件 =============
			isUseUploadImage: '上传图片'
		};
	},
	mounted() {
		// 微信小程序加载默认数据示例 
		// #ifdef MP-WEIXIN
		this.$nextTick(() => {
			this.$refs['allUpload'] && this.$refs['allUpload'].loadAllPreview(this.defaultImageOrVideoList);
			this.$refs['imageUpload'] && this.$refs['imageUpload'].loadImagePreview(this.defaultImageList);
			this.$refs['videoUpload'] && this.$refs['videoUpload'].loadVideoPreview(this.defaultVideoList);
		});
		// #endif
	},
	methods: {
		// 对返回的数据进行格式化
		fnUploadFormat(dataItem) {
			console.log(dataItem);
			return {
				thumbnail: dataItem,
				url: dataItem
			};
		},
		/**
		 * 监听上传的数据内容
		 * 	{
		 * 		type: "" , // "all" 、"image"、 "video"
		 * 		data: {
		 * 			images:[ ],
		 * 			videos:[ ]
		 * 		}
		 * }
		 * */
		fnOnUpload(res) {
			console.log(res);
		},
		fnOnPreVideo(e) {
			uni.showToast({
				icon: 'none',
				title: '点击了视频，视频不支持内部预览'
			});
		},
		// =========== 切换组件
		fnOnSwitchUploadType(e) {
			this.$nextTick(() => {
				this.$refs.uploadRef && this.$refs.uploadRef.fnChangeOptions();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.demo-wrapper {
	padding: 20rpx;
}
.tips {
	position: relative;
	font-size: 28rpx;
	background-color: #f8f8f8;
	margin: 10rpx 0;
	padding: 20rpx;
	padding-left: 40rpx;
	border-radius: 10rpx;
	color: #ddb880;
	&::before {
		content: '';
		position: absolute;
		left: 15rpx;
		top: 20rpx;
		bottom: 15rpx;
		width: 4rpx;
		background-color: #ddb880;
	}
	&-content {
		padding-top: 10rpx;
		color: #999;
		text-indent: 2em;
		&.no-indent {
			text-indent: 0;
		}
		.code-tip {
			text-indent: 0;
			margin: 4rpx;
			padding: 6rpx 10rpx;
			display: inline-block;
			border-radius: 6rpx;
			color: #16af94;
			background-color: #ddb8801f;
			line-height: 1.4;
		}
	}
}
.demo-item {
	& + & {
		margin-top: 50rpx;
	}
	&-title {
		position: relative;
		padding-left: 30rpx;
		margin-bottom: 10rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #354356;
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 6rpx;
			bottom: 4rpx;
			border-radius: 6rpx;
			width: 8rpx;
			background-color: #ddb880;
		}

		.right-content {
			position: absolute;
			top: 0rpx;
			right: 0rpx;
		}
	}
}
</style>
